<template>
  <el-dialog :title="'拆账'" :close-on-click-modal="false" :visible.sync="visible" :append-to-body="true">
    <el-row>
      <el-col :span="24" style="margin-right: 10px; position: relative;">

        <el-form :inline="true" v-for="(item,index) in priceList" :key="index" label-width="80px" style="margin-top: 10px;">
          <el-form-item label="金额(元)" size="small">
            <el-input @change="nowpaysChange" size="small" v-model="item.payPrice" placeholder="￥ 0.00"></el-input>
          </el-form-item>

          <el-form-item label="备注" size="small" prop="remarks">
            <el-input type="textarea" size="small" :rows="1" v-model="item.remarks" placeholder="备注"></el-input>
           </el-form-item>

          <el-button size="small" class="in_block" v-if="index != 0" @click="remPaysItem(item)">删除</el-button>
          <el-button size="small" class="in_block" v-if="index == 0" @click="addPaysItem">添加</el-button>

        </el-form>

        <div class="common_prompt position clear_float" style="bottom: 0px;">
          <div class="pull">
            <span>已拆:￥{{yichaiMoney}}</span>
            <span>未拆:￥{{weichaiMoney}}</span>
          </div>
          <div class="push"><span>总额:￥{{totlMoney}}</span></div>
        </div>
      </el-col>

    </el-row>

    <span class="dialog-footer" slot="footer">
      <el-button @click="visible = false">{{ $t('Common.Cancel') }}</el-button>
      <el-button type="primary" @click="dataFormSubmit">{{ $t('Common.Confirm') }}</el-button>
    </span>

  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      priceList:[

      ],
      totlMoney:0,
      yichaiMoney:0,
      weichaiMoney:0,
      dataForm: {
        peopleId: '',
      },
      dataRule: {
        sellerId: [{ required: true, message: '商家不能为空', trigger: 'blur' }]
      },
      visible: false,
      info: {}
    };
  },
  components: {},
  methods: {
    nowpaysChange() {
      this.yichaiMoney = 0;
      this.weichaiMoney = 0;
      this.priceList.forEach(item => {
         this.yichaiMoney +=parseFloat(item.payPrice ? item.payPrice : 0)
      });
      this.weichaiMoney = (this.totlMoney - this.yichaiMoney).toFixed(2)
    },
    remPaysItem(item) {
      this.priceList.splice(this.priceList.indexOf(item), 1);
      this.nowpaysChange();
    },
    addPaysItem() {
      this.priceList.push({
        payPrice: 0,
        remarks: '',
      });
      this.nowpaysChange();
    },
    initPriceList(index){
      this.priceList = []
      var avgPrice = parseFloat(this.totlMoney / index).toFixed(3)
      for (var i = 0; i < index; i++) {
        this.priceList.push({
          payPrice: avgPrice,
          remarks: '',
        });
      }
      this.nowpaysChange();
    },
    init(info, peopleId) {
      this.info = info;
      this.totlMoney = info.payPrice
      this.visible = true;
      this.$nextTick(() => {
        this.dataForm.peopleId = peopleId;
        this.initPriceList(2);
      });
    },
    // 表单提交
    dataFormSubmit() {
      //计算拆账金额
      var yichai = 0;
      this.priceList.forEach(item => {
         yichai +=parseFloat(item.payPrice ? item.payPrice : 0)
      });
      if(yichai != this.totlMoney){
        this.$message.error("拆分的金额与总金额不一致");
        return false
      }
      this.$http({
        url: this.$http.adornUrl(`/hotel/thotelfloorroomcheckinaccounting/demolition`),
        method: 'post',
        data: this.$http.adornData({
          demolitions: JSON.stringify(this.priceList),
          submitIds: this.info.id,
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.$nextTick(() => {
            this.$emit('refreClosing');
          });
          this.visible = false;
          this.$message({
            message: this.$t('Common.OperationSuccessful'),
            type: 'success',
            duration: 1500
          });
        } else {
          this.$message.error(data.msg);
        }
      });
    }
  }
};
</script>

<style></style>
